<template>
  <!-- <div>供应链商品库</div> -->
  <div class="shop">
    <div class="top">
      <!-- <el-button size='small'
        type='primary'
        @click="addWoodsStore">同步商品库</el-button> -->

      <el-button class='search'
        size='small'
        type='primary'
        @click="searchSupplyChain">搜索</el-button>
      <el-input class="search input"
        size='small'
        v-model="product_no"
        placeholder="输入商品编号查询"
        clearable></el-input>
      <el-input class="search input"
        size='small'
        v-model="title"
        placeholder="输入商品名称查询"
        clearable></el-input>
      
         <el-select style="width:130px;"
        size='small'
        v-model="twopid"
        filterable
        class="search"
        @change="onChangeTwoPid"
        placeholder="二级类目">
          <el-option v-for="item in pidlistTwo" :label="item.name" :value="item.id" :key="item.id"></el-option>
       </el-select>

       <el-select style="width:130px;"
        size='small'
        v-model="pid"
        filterable
        class="search"
        @change="onChangePid"
        placeholder="商品类目">
          <el-option v-for="item in pidlist" :label="item.name" :value="item.id" :key="item.id"></el-option>
       </el-select>

       
      <!-- <el-select style="width:130px;"
        size='small'
        v-model="is_depot"
        filterable
        class="search"
        placeholder="入库状态">
        <el-option label="全部"
          :value="2">全部</el-option>
        <el-option label="已入库"
          :value="1"></el-option>
        <el-option label="未入库"
          :value="0"></el-option>
      </el-select> -->
    </div>
    <el-table :data="tableData"
      style="width:100%"
      max-height="680"
      class="table"
      :cell-style="tc"
      :header-cell-style="tccolor">

      <el-table-column label='商品编号'
        prop='product_no' width='120'></el-table-column>
      <el-table-column label='商品名称'
        prop='title' width='230'></el-table-column>
      <el-table-column label='商品图片'
        width='180'>
        <template slot-scope="scope">
          <div class="img">
            <img :key="scope.row.ID"
              style="width:100px;"
              :src="scope.row.img_url? scope.row.img_url : errorImg"
              alt />
          </div>
          <p class="more"
            @click="lookMoreShop(scope.row.product_no)">（更多）</p>
        </template>
      </el-table-column>
      <el-table-column label='商品类目'
        prop='cate_name' width='140'></el-table-column>
      <el-table-column label='供货成本价' width='140'>
        <template slot-scope="scope">
          <p>¥ {{scope.row.supply_min_price}}</p>
        </template>
      </el-table-column>
       <el-table-column label='成本运费' width='140'>
        <template slot-scope="scope">
          <p>¥ {{scope.row.supply_freight_price}}</p>
        </template>
      </el-table-column>
      <!-- <el-table-column label='商品库存'
        prop='stock'></el-table-column> -->
      <el-table-column label='商品SKU'>
        <template slot-scope="scope">
          <p class="morelook" @click="watchSkuDetail(scope.row.product_no)">查看</p>
        </template>
      </el-table-column>
      <el-table-column label='状态' prop='is_depot_word'>
      </el-table-column>
      <el-table-column label='选品操作'
        fixed='right'>
        <template slot-scope="scope">
          <el-button v-if='scope.row.is_depot == 1'
            size='mini'
            type='danager'
            :disabled='true'>选品入库</el-button>
             <el-button v-else
            size='mini'
            type='primary'
            @click="selectShopToStore(scope.row.product_no,scope.row.title)">选品入库</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-col :span="24">
      <div class="pagination">
        <el-pagination background
          @current-change="pageChange"
          :current-page="page"
          :page-size="size"
          layout="total, prev, pager, next, jumper"
          :total="total"></el-pagination>
      </div>
    </el-col>

    
     <!--商品图片  :n="img_arr.length"-->
    <jdialog title="商品图片查看" :visible.sync="isShowShopImg" width="640px">
      <div class="sku_pic">
        <div v-for='(item,index) in img_arr' :key="index" class="main_sku">
          <img 
              style="width:160px;height:160px;"
              class="sku_pic_margin"
              :src="item? item : errorImg"
              alt />
        <p v-if='index ==0' class="main_img">商品主图</p>
        <p v-else class="other_img main_img">商品轮播图</p>
        </div>
      </div>
       
    </jdialog>
    <!--商品SKU信息-->
    <jdialog title="商品SKU信息" :visible.sync="isShowSKUInformtion" width="800px">
      <skudetail :visible="isShowSKUInformtion"
        :currentId="skuId"
        @close="isShowSKUInformtion = false"
        @showSkuInfoDetail="certainshowSKUInfordetail"></skudetail>
    </jdialog>

    <!--同步商品库-->
    <jdialog title="商品数据同步" :visible.sync="isShowSynchronism" width="500px">
      <div class="syncdata">
         <div class='sync-load' v-loading="loading"></div>
         <div class="sync-ing">正在同步中</div>
        <div class="sync_num">本次同步商品总数：{{syncShopNum}}件（本窗口可关闭）</div>
      </div>
    </jdialog>
  </div>
</template>

<script>

import errorImg from "@/assets/images/error_img.png";
import skudetail from './skudetailInfor';
import {supplyProductSearchList,
        supplyProductImgList,
        supplyProductSync,
        supplyproductSyncCount,freightProductSupplyProductCate} from "@/api/autarky";
// import uploadImg from "@/components/uploadImg";
export default {
  components: {
    // uploadImg,
    skudetail
  },
  data () {
    return {
      title: '',
      product_no: '',
      pid:'',
      pidlist:[],
      twopid:'',
      pidlistTwo:[],
      // is_depot: '',
      tableData: [],
      errorImg,
      page: 1,
      size: 20,
      total: 0,

      //商品SKU信息
      isShowSKUInformtion:false,
      skuId:'',

      //商品同步
      isShowSynchronism:false,
      syncShopNum:0,
      loading:false,

      //商品图片
      isShowShopImg:false,
      img_arr:[]
    }
  },
  mounted () {
    this.getsupplyProductSearchListData()
    this.freightProductSupplyProductCateData()
  },
  methods: {
    selectShopToStore (product_no,title) {
       this.$router.push({
         path:'./addshopTostore',
          query: {type:1,product_no:product_no,title:title}
       })
    },
    searchSupplyChain () {
       this.getsupplyProductSearchListData()
    },
    addWoodsStore () {
       this.isShowSynchronism = true
       this.loading = true 
       this.getsupplyproductSyncCountData()
    },
    pageChange (page) {
      this.page = page;
      //申请更多数据
      this.getsupplyProductSearchListData()
    },
    lookMoreShop (product_no) {
      this.getsupplyProductImgListData(product_no)
      this.isShowShopImg = true
      
    },
    watchSkuDetail(id){
      this.isShowSKUInformtion = true
      this.skuId  =  id
    },
    certainshowSKUInfordetail(){
      this.isShowSKUInformtion  = false
    },
    
    //获取更多选品商品库详情
    async getsupplyProductSearchListData(){
      // if(this.is_depot == 2){
      //   this.is_depot = ''
      // }'is_depot='+this.is_depot+
      var url = 'title='+this.title+
                 '&cate_id='+this.twopid+
                '&product_no='+this.product_no+
                '&page='+this.page
  
      let  res = await supplyProductSearchList(url);
      if(res.code === 10000){
        this.tableData = res.data.data
        this.total = res.data.total
      }else{
        this.$message.error(res.message)
      }
    },
    
    //获取分类
    async freightProductSupplyProductCateData(){
       var url = 'pid='+this.pid
      let res  = await freightProductSupplyProductCate(url)
      console.log(res)
      this.pidlist = res.data
    },
    onChangePid(id){
      this.twopid = '',
      this.pidlistTwo = []
      this.TwofreightProductSupplyProductCateData(id)
    },
   onChangeTwoPid(){
     this.getsupplyProductSearchListData()
   },
    async TwofreightProductSupplyProductCateData(pid){
       var url = 'pid='+pid
      let res  = await freightProductSupplyProductCate(url)
      console.log(res)
      this.pidlistTwo = res.data
    },
    //查看sku图片
    async getsupplyProductImgListData(product_no){
      let res = await supplyProductImgList(product_no)
      if(res.code === 10000){
        this.img_arr = res.data
      }else{
        this.$message.error(res.message)
      }
    },
          
    async  getsupplyProductSyncData(){
       let res = await supplyProductSync()
        console.log(res)
        this.isShowSynchronism = false
        this.loading = false
        this.$message.success('同步成功')
        this.getsupplyProductSearchListData()

    },
    
    async getsupplyproductSyncCountData(){
      let res = await supplyproductSyncCount()
      if(res.code === 10000){
         this.syncShopNum = res.data. sync_product_count
         this.getsupplyProductSyncData()
      }else{
        console.log(res.message)
      }
    },
    getFile(file){
      if (file.files && file.files.length && file.name == 'storeShop_pic_list"') {
        this.img_arr = file.files.map(obj => obj.url)
      }
      console.log(this.img_url)
    },
    tc () {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor () {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
  }

}
</script>
<style lang="scss" scoped>
.shop {
  padding: 20px;
  .top {
    height: 30px;
    .search {
      float: right;
      margin-left: 12px;
    }
    .input {
      width: 150px;
    }
  }
  .img {
    float: left;
  }
  .sku_pic{
    padding: 12px 20px;
    .sku_pic_margin{
      margin: 12px  12px;
    }
    .main_sku{
      position: relative;
      float: left;
      margin-bottom: 12px;
    }
    .main_img{
      position: absolute;
      bottom: 0;
      left: 12px;
      background-color: #f5f5f5;
      color: #f4222d;
      text-align: center;
      font-size: 14px;
      line-height: 30px;
      height: 30px;
      width: 160px;
    }
    .other_img{
      color: rgb(71, 255, 47);
    }
  }

  .more {
    width: 50px;
    float: right;
    line-height: 100px;
    color: #f4222d;
    cursor: pointer;
  }
  .morelook{
     color: #f4222d;
    cursor: pointer;
    text-align: center;
  }
  .table{
    margin-top:16px;
  }
  .pagination {
    float: right;
    margin-top: 12px;
  }
  .syncdata{
    width: 100%;
    height: 300px;
    .sync-load{
      width: 100%;
      height: 140px;
      margin-top: 20px;
    }
    .sync-ing{
      text-align: center;
      color: #999999;
      font-size: 12px;
    }
    .sync_num{
      text-align: center;
      font-size: 12px;
      margin-top: 15px;
    }
  }
}
</style>